import {
  addBindRuleApi,
  getProgramOptions,
  updateBindRuleApi,
} from '@/services/api';
import {
  DrawerForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useRequest } from '@umijs/max';
import { Form, message } from 'antd';
import { isEqual } from 'lodash';
import React, { useRef, useState } from 'react';
interface Props {
  open?: boolean;
  info?: any;
  close?: () => void;
  onFinish?: () => void;
}

const CreateBindRuleDrawer: React.FC<Props> = ({
  open,
  close,
  info,
  onFinish,
}) => {
  const [form] = Form.useForm();

  const formRef = useRef<ProFormInstance>();

  const usersValue = Form.useWatch('users', form);

  // 是否打开配置商户弹窗
  const [openMerchant, setOpenMerchant] = useState(false);

  // 查询所有商户
  const { data: merchantList } = useRequest(async () => {
    return await getProgramOptions();
  });

  return (
    <DrawerForm
      formRef={formRef}
      title={info.id ? '编辑绑定规则' : '新建绑定规则'}
      form={form}
      open={open}
      width={'38%'}
      onOpenChange={(visible) => {
        if (!visible) {
          close?.();
        }
      }}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      initialValues={{ ...info }}
      onFinish={async (values) => {
        try {
          if (!info?.id) {
            const { msg } = await addBindRuleApi({
              ...values,
            });

            message.success(msg);
          } else {
            const { msg } = await updateBindRuleApi(info?.id, {
              ...values,
            });

            message.success(msg);
          }

          onFinish?.();
          // 不返回不会关闭弹框
          return true;
        } catch (error) {}
      }}
    >
      <ProFormText
        width="lg"
        name="coding"
        label="编码"
        placeholder="请输入编码"
        rules={[
          {
            required: true,
          },
        ]}
      />

      <ProFormText
        width="lg"
        name="title"
        label="规则名称"
        placeholder="请输入规则名称"
        rules={[
          {
            required: true,
          },
        ]}
      />

      <ProFormText
        width="lg"
        name="second"
        label="专属套餐"
        placeholder="请输入专属套餐"
      />

      <ProFormSelect
        name="type"
        label="绑定类型"
        rules={[
          {
            required: true,
          },
        ]}
        options={[
          {
            value: 1,
            label: '渠道',
          },
          {
            value: 2,
            label: '企业',
          },
        ]}
      ></ProFormSelect>

      {/* <ProFormSelect
        name="user"
        label="商户关联"
        rules={[
          {
            required: true,
          },
        ]}
        options={merchantList ?? []}
      ></ProFormSelect> */}

      {/* 
      <ProFormItem
        name="users"
        label="商户关联"
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Space>
          <Button
            onClick={() => {
              setOpenMerchant(true);
            }}
          >
            配置商户
          </Button>

          {usersValue?.length > 0 && (
            <Tag> 已选商户数量：{usersValue?.length}</Tag>
          )}
        </Space>
      </ProFormItem>

      <CommonTransfer
        open={openMerchant}
        onClose={() => {
          setOpenMerchant(false);
        }}
        onOk={(vales) => {
          form.setFieldValue('users', vales);
          setOpenMerchant(false);
        }}
        initValues={usersValue}
      /> */}
    </DrawerForm>
  );
};

export default React.memo(CreateBindRuleDrawer, (prev, next) =>
  isEqual(prev, next),
);
